import React from "react";
import "./style.css";
import inputupdate1 from "../image/inputupdate2.png";
import inputupdate2 from "../image/inputupdate2.png";
import leave from "../image/离开页面.png";
const imgStyle = {
  width: 70 + "%",
  height: 70 + "50%",
};
export default class Install extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "constructor",
    };
    console.log("-----constructor-------");
    console.log(Object.keys(this));
    console.log("constructor--" + this.state.message + "--显示初始值");
  }

  componentWillMount() {
    console.log("-----componentWillMount-------");
    this.setState({
      message: "componentWillMount",
    });
    console.log(Object.keys(this));
    console.log(
      "componentWillMount--" +
        this.state.message +
        "--显示constructor状态的初始值"
    );
  }
  componentDidMount() {
    console.log("--------componentDidMount----------");
    this.setState({
      message: "componentDidMount",
    });
    console.log(Object.keys(this));
    console.log(
      "componentDidMount---" +
        this.state.message +
        "--显示componentWillMount状态的初始值"
    );
  }
  componentWillUnmount() {
    console.log("--------componentWillUnmount----------");
    this.setState({
      message: "componentWilUnMount",
    });
    console.log(Object.keys(this));
    console.log(
      "componentWilUnMount--" +
        this.state.message +
        "--显示componentDidMount状态的初始值"
    );
  }
  render() {
    return (
      <div>
        <h1>挂载卸载过程</h1>
        按时间顺序分别是：
        <p>constructor()</p>
        <p>componentWillMount()</p>
        {"获取一个值"}
        <p></p>
        <p>componentDidMount()</p>
        <img style={imgStyle} src={inputupdate1} />
        <br />
        <img style={imgStyle} src={inputupdate2} />
        <p>除了构造状态，其他状态都输出上一状态修改的值</p>
        <p>componentWillUnmount()</p>
        <img style={imgStyle} src={leave} />
      </div>
    );
  }
}
